<template>

  <div class="search">
    <Form ref="form" :model="formItem" :rules="formItemRules" :label-width="100">
      <FormItem label="编码" prop="apiCode">
        <Input
          :disabled="formItem.apiId && formItem.isPersist === 1?true:false"
          v-model="formItem.apiCode"
          placeholder="请输入内容"></Input>
      </FormItem>
      <FormItem label="名称" prop="apiName">
        <Input
          :disabled="formItem.apiId && formItem.isPersist === 1?true:false"
          v-model="formItem.apiName"
          placeholder="请输入内容"></Input>
      </FormItem>
      <FormItem label="访问地址" prop="path">
        <Input
          :disabled="formItem.apiId && formItem.isPersist === 1?true:false"
          v-model="formItem.path"
          placeholder="请输入内容"></Input>
      </FormItem>
      <FormItem label="服务名称" prop="serviceId">
        <Input v-model="formItem.serviceId" placeholder="spring.application.name"></Input>
      </FormItem>
      <FormItem label="分类" prop="apiCategory">
        <Input v-model="formItem.apiCategory" placeholder="请输入内容"></Input>
      </FormItem>
      <FormItem label="优先级">
        <InputNumber v-model="formItem.priority"></InputNumber>
      </FormItem>
      <FormItem label="身份认证">
        <RadioGroup v-model="formItem.isAuth" type="button">
          <Radio :disabled="formItem.apiId?true:false" :label="0">关闭</Radio>
          <Radio :disabled="formItem.apiId && formItem.isPersist === 1?true:false" :label="1">开启</Radio>
        </RadioGroup>
        <p><code>开启：未认证登录,提示"认证失败,请重新登录!";关闭: 不需要认证登录。</code></p>
      </FormItem>
      <FormItem label="状态">
        <RadioGroup v-model="formItem.status" type="button">
          <Radio :label="0">禁用</Radio>
          <Radio :label="1">正常</Radio>
          <Radio :label="2">维护中</Radio>
        </RadioGroup>
        <p><code>禁用：提示"请求地址,禁止访问!";维护中：提示"正在升级维护中,请稍后再试!";</code></p>
      </FormItem>
      <FormItem label="描述">
        <Input v-model="formItem.apiDesc" type="textarea" placeholder="请输入内容"></Input>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  name: 'ApiInfo',
  data () {
    const validateEn = (rule, value, callback) => {
      const reg = /^[_.a-zA-Z0-9]+$/
      if (value === '') {
        callback(new Error('接口编码不能为空'))
      } else if (value !== '' && !reg.test(value)) {
        callback(new Error('只允许字母、数字、点、下划线'))
      } else {
        callback()
      }
    }

    return {
      isAdd: true,
      formItemRules: {
        serviceId: [
          { required: true, message: '所属服务不能为空', trigger: 'blur' }
        ],
        apiCategory: [
          { required: true, message: '接口分类不能为空', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '接口地址不能为空', trigger: 'blur' }
        ],
        apiCode: [
          { required: true, validator: validateEn, trigger: 'blur' }
        ],
        apiName: [
          { required: true, message: '接口名称不能为空', trigger: 'blur' }
        ]
      },
      formItem: this.getFormItem()
    }
  },
  methods: {
    getFormItem () {
      return {
        apiId: '',
        apiCode: '',
        apiName: '',
        apiCategory: 'default',
        path: '',
        status: 1,
        isAuth: 1,
        openSwatch: false,
        authSwatch: true,
        serviceId: '',
        priority: 0,
        apiDesc: ''
      }
    },
    setData (data) {
      this.isAdd = true
      if (data && data.apiId) {
        Object.assign(this.formItem, {
          apiId: data.apiId,
          apiCode: data.apiCode,
          apiName: data.apiName,
          apiCategory: data.apiCategory,
          path: data.path,
          status: data.status,
          isAuth: data.isAuth,
          serviceId: data.serviceId,
          priority: data.priority,
          apiDesc: data.apiDesc
        })
        this.isAdd = false
      } else {
        this.handleReset()
      }
    },
    handleReset () {
      this.$refs['form'].resetFields()
      this.formItem = this.getFormItem()
    },
    handleSubmit () {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$http.post(this.$apis.api.save, this.formItem, this).then(res => {
              resolve(res)
            }).catch(function (err) {
              reject(err)
            })
          } else {
            resolve(false)
          }
        })
      })
    }
  },
  created () {

  },
  mounted () {
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
